<!DOCTYPE html>
<html lang="zh">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>ZHH表单校验插件说明文档</title>

	<link href="https://apps.bdimg.com/libs/bootstrap/2.3.2/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
	<link href="../code/zhh.validate.css" type="text/css" rel="stylesheet" />
	<link href="demo/demo.css" type="text/css" rel="stylesheet" />

	<script src="https://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
	<script src="https://apps.bdimg.com/libs/bootstrap/2.3.2/js/bootstrap.min.js" type="text/javascript"></script>
	<script src="https://apps.bdimg.com/libs/prettify/188.0.0/prettify.min.js" type="text/javascript"></script>
	<script src="../../zhh.tools/zhh.tools.js" type="text/javascript" charset="UTF-8"></script>
	<script src="../code/zhh.validate.js" type="text/javascript" charset="UTF-8"></script>
	<script src="demo/demo.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body onload="prettyPrint();">


	<div class="navbar navbar-static-top">
		<div class="navbar-inner">
			<div class="container">
				<a class="brand" href="https://zhaohuihua.gitee.io/">zhaohuihua</a>
				<div class="nav-collapse collapse">
					<ul class="nav">
						<li class="divider-vertical"></li>
						<li><a href="https://gitee.com/zhaohuihua/zhh.validate.js">zhh.validate.js</a></li>
						<li class="divider-vertical"></li>
						<li class="active"><a href="./index.html">说明文档</a></li>
						<li class="divider-vertical"></li>
						<li><a href="./register.html">注册示例</a></li>
						<li class="divider-vertical"></li>
						<li><a href="https://gitee.com/zhaohuihua/zhh.validate.js/repository/archive/master.zip">下载</a></li>
						<li class="divider-vertical"></li>
					</ul>
				</div>
			</div>
		</div>
	</div>


	<div class="container main-box note-box">
		<div class="row">
			<div class="contact-email">联系: zhaohuihua@126.com</div>
			<div class="main-inner">
				<div class="page-header">
					<h2 class="text-center">《zhh.validate.js》v2.x 说明文档</h2>
				</div>
				<h3><i>1</i><p>概要描述</p><s></s></h3>
				<p>zhh.validate.js，ZHH表单校验插件，是一个WEB前端校验插件，提供表单字段的配置式校验功能。</p>
				<p>使用方便，所有校验参数都提供data-API，常用的校验功能不需要写一行JavaScript代码，即可完全通过配置来实现。</p>
				<p>扩展简单，支持开发人员自定义复杂的校验，支持全局预置和页面定制。对基础校验功能也都提供了修改的方法。</p>
				<p>整个表单的校验和每个字段行的校验都支持自动触发和手工触发。</p>
				<h3><i>2</i><p>文件结构</p><s></s></h3>
<pre class="prettyprint">
zhh.validate
  ├─code
  │   zhh.tools.js
  │   zhh.validate.css
  │   zhh.validate.js
  └─doc
     │   index.html
     │   register.html
     └─demo
           demo.css
           demo.js
           succ.png
</pre>
				<p>文件结构非常简单，解开压缩包后只有JS和CSS两个文件，doc文件夹下是说明文档。</p>
				<p>依赖jquery.1.10+，和zhh.tools.js。</p>

				<h3><i>3</i><p>校验示例</p><s></s></h3>
				<p>先来一个真实的登录示例，具体校验规则之后有详细解说。<a href="./register.html">这里还有一个完整的注册示例 &gt;&gt;</a></p>
				<div class="bs-docs-example">
				<form class="vld-form form-horizontal">
					<div class="control-group vld-line">
						<label class="control-label"><span class="asterisk">*</span> 登录账号</label>
						<div class="controls">
							<input class="span3" type="text" name="account"
								data-vld="[ {required:true}, {length:[4,10]}, {regexp:'ascii'}, {regexp:'illegal-char'}, {ajax:'demo/ajax.txt',options:{type:'GET',dataType:'text'},text:'用户名已被使用'} ]" />
							<span class="help-inline">
								<i class="vld-tips">4-10位数字或字母</i>
							</span>
						</div>
						<div class="controls">
							<p>必填，4-10位，不支持中文字符</p>
							<p>不允许包含!@#$%^&amp;*,./\等特殊字符，AJAX校验</p>
						</div>
					</div>
					<div class="control-group vld-line">
						<label class="control-label"><span class="asterisk">*</span> 密码</label>
						<div class="controls">
							<input class="span3" type="password" name="pwd" data-trim="false" 
								data-vld="[ {required:true}, {length:[6,16]}, {regexp:'ascii'}, {compare:'[name=account]',reverse:true}, {pwdlevel:'medium'} ]" />
							<span class="help-inline">
								<i class="vld-tips">密码必须包含字母/数字/特殊字符的任意两种</i>
							</span>
						</div>
						<div class="controls">
							<p>必填，6-16位，支持空格，不支持中文字符，不能与用户名相同</p>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label">&nbsp;</label>
						<div class="controls">
							<input type="button" class="btn btn-primary input-medium vld-submit" value="提交" />
						</div>
					</div>
				</form>
				</div>
<pre class="prettyprint linenums colorless">
&lt;form class="form-horizontal <span class="colourful">vld-form</span>"&gt;
  &lt;div class="control-group <span class="colourful">vld-line</span>"&gt;
    &lt;label class="control-label"&gt;&lt;span class="asterisk"&gt;*&lt;/span&gt; 登录账号&lt;/label&gt;
    &lt;div class="controls"&gt;
      &lt;input class="span3" type="text" name="account"
        <span class="colourful">data-vld="[ {required:true}, {length:[4,10]}, {regexp:'ascii'}, {regexp:'illegal-char'}, {ajax:'demo/ajax.txt',options:{type:'GET',dataType:'text'},text:'用户名已被使用'} ]"</span> /&gt;
      &lt;span class="help-inline"&gt;
        <span class="colourful">&lt;i class="vld-tips"&gt;4-10位数字或字母&lt;/i&gt;</span>
      &lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="controls"&gt;
      &lt;p&gt;必填，4-10位，不支持中文字符&lt;/p&gt;
      &lt;p&gt;不允许包含!@#$%^&amp;*,./\等特殊字符，AJAX校验&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="control-group <span class="colourful">vld-line</span>"&gt;
    &lt;label class="control-label"&gt;&lt;span class="asterisk"&gt;*&lt;/span&gt; 密码&lt;/label&gt;
    &lt;div class="controls"&gt;
      &lt;input class="span3" type="password" name="pwd" data-trim="false" 
        <span class="colourful">data-vld="[ {required:true}, {length:[6,16]}, {regexp:'ascii'}, {compare:'[name=account]',reverse:true}, {pwdlevel:'medium'} ]"</span> /&gt;
      &lt;span class="help-inline"&gt;
        &lt;i <span class="colourful">class="vld-tips"</span>&gt;密码必须包含字母/数字/特殊字符的任意两种&lt;/i&gt;
      &lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="controls"&gt;
      &lt;p&gt;必填，6-16位，支持空格，不支持中文字符，不能与用户名相同&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="control-group"&gt;
    &lt;label class="control-label"&gt;&nbsp;&lt;/label&gt;
    &lt;div class="controls"&gt;
      &lt;input type="button" class="btn btn-primary input-medium <span class="colourful">vld-submit</span>" value="提交" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/form&gt;
</pre>
				<h3><i>4</i><p>基本概念</p><s></s></h3>
				<h4>校验单元</h4>
				<p>以&lt;form&gt;为基础，其中的每一个<code>class="vld-line"</code>或<code>class="form-group"</code>为一个校验单元。<p>
				<p>一般就是表单的一个字段。如用户名/密码/注册邮箱等，都可以作为一个校验单元。</p>
				<h4>校验规则</h4>
				<p>校验规则，以<code>data-vld="..."</code>的形式配置在输入框上。</p>
				<pre class="prettyprint linenums">&lt;input data-vld="{ label:'登录账号', rules:[ {required:true}, {length:[4,10]}, ... ] }" /&gt;</pre>
				<p>如果label可以自动获取，则简写为：</p>
				<pre class="prettyprint linenums">&lt;input data-vld="[ {required:true}, {length:[4,10]}, ... ]" /&gt;</pre>
				<p>如果只有一个规则，还可以简写为：</p>
<pre class="prettyprint linenums">
&lt;input data-vld="required:true" /&gt; // 必填
&lt;input data-vld="regexp:'mobile'" /&gt; // 手机号码
</pre>
				<p>默认支持的类型有必填校验、长度校验、正则表达式校验、对比校验、AJAX校验、密码强度校验等。</p>
				<h4>标签文本</h4>
				<p>错误提示中的占位符<code>{label}</code>表示校验单元里面的标签文本。<p>
				<p>标签文本可以自动查找校验单元中的<code>class="vld-label"</code>或<code>class="control-label"</code>。会清除前面的星号和后面的冒号。<p>
				<p>以下示例，{label}=登录账号：<p>
				<pre class="prettyprint linenums">&lt;label class="vld-label"&gt;登录账号&lt;/label&gt;&lt;input type="text" ... data-vld="[...]" /&gt;</pre>
				<p>也可以通过配置指定，<code>data-vld="{ label:'登录账号', rules:[...] }"</code>。配置指定优先级高于自动查找。<p>
				<pre class="prettyprint linenums">&lt;label class="vld-label"&gt;账号&lt;/label&gt;&lt;input type="text" ... data-vld="{ label:'登录账号', rules:[...] }" /&gt;</pre>

				<h3><i>&gt;</i><p>必填校验</p><s></s></h3>
				<pre class="prettyprint linenums">{ required:true }</pre>
				<p>可以自定义提示信息，如：<p>
<pre class="prettyprint linenums">
{ required:true, text:'请同意服务协议' }
{ required:true, text:'请选择{label}' }
</pre>
				<p>如果目标输入框内容为空，则校验不通过。<p>
				<p>单选框/复选框，没有选中则校验不通过。<p>
				<p>单选框/复选框的校验规则应配置在第一个input上。<p>
				<div class="bs-docs-example">
				<form class="vld-form form-horizontal">
					<div class="control-group vld-line">
						<label class="control-label"><span class="asterisk">*</span> 登录账号</label>
						<div class="controls">
							<input class="span3" type="text" name="account" autocomplete="off" data-vld="{required:true}" />
							<span class="help-inline">
								<i class="vld-tips"></i>
							</span>
						</div>
						<div class="controls">
							<p><code>data-vld="{required:true}"</code></p>
						</div>
					</div>
					<div class="control-group vld-line">
						<label class="control-label"><span class="asterisk">*</span> 收入水平</label>
						<div class="controls">
							<select class="span3" name="area" autocomplete="off" data-vld="{required:true}">
								<option value="">----请选择----</option>
								<option value="1001">0 - 5000</option>
								<option value="1002">5001 - 10000</option>
								<option value="1003">10001 - 20000</option>
								<option value="1004">20000以上</option>
							</select>
							<span class="help-inline">
								<i class="vld-tips"></i>
							</span>
						</div>
						<div class="controls">
							<p><code>data-vld="{required:true}"</code></p>
						</div>
						<div class="controls">
							<p>下拉选择框，选中项的值为空则校验不通过，<code>&lt;option value=""&gt;-请选择-&lt;/option&gt;</code>。<p>
						</div>
					</div>
					<div class="control-group vld-line">
						<label class="control-label"><span class="asterisk">*</span> 性别</label>
						<div class="controls">
							<div class="input-prepend input-radio">
								<span class="add-on"><input type="radio" id="male" name="gender" value="1" autocomplete="off" data-vld="{required:true,text:'请选择{label}'}" /></span>
								<label class="input" for="male">男</label>
								<span class="add-on"><input type="radio" id="female" name="gender" value="2" autocomplete="off" /></span>
								<label class="input" for="female">女</label>
								<span class="add-on"><input type="radio" id="secret" name="gender" value="3" autocomplete="off" /></span>
								<label class="input" for="secret">保密</label>
							</div>
							<span class="help-inline">
								<i class="vld-tips"></i>
							</span>
						</div>
						<div class="controls">
							<p><code>data-vld="{required:true,text:'请选择{label}'}"</code></p>
						</div>
						<div class="controls">
							<p>单选框/复选框，没有选中则校验不通过。<p>
						</div>
					</div>
					<div class="control-group vld-line">
						<label class="control-label"><span class="asterisk">*</span> 服务协议</label>
						<div class="controls">
							<div class="input-prepend">
								<span class="add-on"><input type="checkbox" id="agree" name="agree" autocomplete="off" data-vld="{required:true,text:'请同意服务协议'}" /></span>
								<label class="input" for="agree">我同意接受&nbsp;《<a href="#">服务协议</a>》</label>
							</div>
							<span class="help-inline">
								<i class="vld-tips"></i>
							</span>
						</div>
						<div class="controls">
							<p><code>data-vld="{required:true,text:'请同意服务协议'}"</code></p>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label">&nbsp;</label>
						<div class="controls">
							<input type="button" class="btn btn-primary input-medium vld-submit" value="提交" />
						</div>
					</div>
				</form>
				</div>

				<h3><i>&gt;</i><p>字符长度校验</p><s></s></h3>
				<p>如果目标输入框的字符长度不符合要求，则校验不通过。<p>
				<p>min指定字符长度的最小值，max指定最大值，这两个参数至少要指定一个。<p>
				<p>如果不是必填项，即使指定了最小长度而输入框为空，也认为校验通过，可以提交。<p>
<pre class="prettyprint linenums">
{ length:{min:4,max:12} } // 字符长度4-12位
{ length:[4,12] } // 字符长度4-12位
{ length:{min:4} } // 字符长度不得小于4位
{ length:[4] } // 字符长度不得小于4位
{ length:{max:12} } // 字符长度不得大于12位
</pre>

				<h3><i>&gt;</i><p>数字校验</p><s></s></h3>
				<p>如果目标输入框的内容不是数字，或者数字超过了指定范围，则校验不通过。<p>
				<p>min指定数字的最小值，max指定最大值，这两个参数可以都不指定。<p>
				<p>sign指定是否允许前面的+-号，默认为不允许。<p>
				<p>decimal指定小数位数，默认为0，即只允许输入整数。<p>
<pre class="prettyprint linenums">
{ number:true } // 必须是数字
{ number:{min:1900,max:2999} } // 数字必须在1900-2999之间
{ number:[1900,2999] } // 数字必须在1900-2999之间
{ number:{min:1900} } // 数字不得小于1900
{ number:[1900] } // 数字不得小于1900
{ number:{max:2999} } // 数字不得大于2999
{ number:true, sign:true } // 允许+-号
{ number:true, decimal:4 } // 最多4位小数
{ number:true, sign:true, decimal:4 } // 允许+-号, 最多4位小数
</pre>

				<h3><i>&gt;</i><p>正则表达式校验</p><s></s></h3>
				<h4>预定义正则表达式</h4>
				<pre class="prettyprint linenums">{ regexp:'xxx' }</pre>
				<p>xxx指向预定义的正则表达式，目前有url、email、mobile(手机号码)、ascii(只支持英文字符)、illegal-char(不支持非法字符)等。<p>
				<p>预定义的正则表达式可以自己扩充。<p>
<pre class="prettyprint linenums">
(function(zv) {

	// 定义只允许输入数字和字母的表达式
	zv.regexp["number-ascii"] = /^[0-9a-zA-Z]*$/;
	zv.locals["zh-CN"]["regexp-number-ascii"] = "{label}只允许输入数字和字母";

	// 定义不允许特殊字符的表达式
	// reverse=true表示反转判断结果, 如果匹配就提示错误
	zv.regexp["illegal-char"] = { value:/[!@#$%^&amp;*,.\-\/\\&lt;&gt;]/, reverse:true };
	zv.locals["zh-CN"]["regexp-illegal-char"] = "{label}不支持!@#$%^&amp;*,.-/\&lt;&gt;等特殊字符";

})(jQuery.fn.zhhvalidate.defaults);
</pre>
				<p><code>reverse:true</code>表示反转判断结果，如果匹配就提示错误。<p>
				<p>在<code>illegal-char</code>这个例子里，意味着只要出现这些特殊字符就会提示错误。<p>

				<h4>指定正则表达式</h4>
				<pre class="prettyprint linenums">{ regexp:/^[0-9a-zA-Z]*$/, text:'{label}只允许输入数字和字母' }</pre>
				<p><b>text错误提示不能省略！</b></p>
				<p>正则表达式校验，表示该字段必须匹配正则，匹配为通过，不匹配则提示错误。</p>
				<p><code>reverse:true</code>表示反转判断结果，如果匹配就提示错误。</p>

				<h3><i>&gt;</i><p>相等校验</p><s></s></h3>
<pre class="prettyprint linenums">
{ compare:'selector' }
{ compare:'selector', reverse:true }
</pre>
				<p>相等校验，表示该字段与另一字段必须相等，相等为通过，不相等则提示错误。<p>
				<p>selector，通过jQuery选择符来从&lt;form&gt;中查找元素作为对比目标。</p>
				<p>例如：确认密码必须与登录密码相同。<code>{ compare:'input[name=pwd]' }</code>指向登录密码输入框。</p>
				<p><code>reverse:true</code>表示反转判断结果，如果相等就提示错误。</p>
				<p>例如：密码不能与用户名相同：</p>
				<p><code>{ compare:'input[name=account]', reverse:true }</code></p>

				<h3><i>&gt;</i><p>服务端校验</p><s></s></h3>
<pre class="prettyprint linenums">
{ ajax:'url.do' }
{ ajax:'url.do', fields:fields }
{ ajax:'url.do', fields:fields, options:{ type:GET|POST, dataType:json|html|text, ...} }
</pre>
				<p>如果服务端返回字符串，true或1表示校验通过；false或0表示校验不通过；其他字符串表示校验不通过，这个字符串就是错误提示。</p>
				<p>如果服务端返回JSON格式的数据，就需要自已定义AJAX解析函数了：</p>
<pre class="prettyprint linenums">
(function(zv) {
    // 自定义AJAX解析函数
    var parse = zv.ajax.parse;
    zv.ajax.parse = function(e, json) {
        if ($.isPlainObject(json)) {
            return { passed:json.code=="000000", text:json.message };
        } else { // 调用原解析函数
            return parse.call(this, e, json);
        }
    };
})(jQuery.fn.zhhvalidate.defaults);
</pre>
				<p><code>fields</code>配置ajax请求需要提交的字段<p>
<pre class="prettyprint linenums">
{ ajax:'url.do' } // 不配置fields时, 默认取当前input的value, 以当前input的name提交
{ ajax:'url.do', fields:'email' } // 从form中查找name=email的input的值
{ ajax:'url.do', fields:{account:'email'} } // 从form中查找name=email的input的值, 以account作为参数名提交
{ ajax:'url.do', fields:['formInputName1',{paramName2:'formInputName2'},{paramName3:'formInputName3'}] } // 多个参数
</pre>
				<p>也可以自定义根据配置从form查找提交参数的方法：</p>
<pre class="prettyprint linenums">
(function(zv) {
    // 自定义根据配置从form查找提交参数的方法
    zv.fn.getFormFields = function(form, fields) {
        if (!$.isArray(fields)) { fields = [fields]; }
        var result = {};
        $.each(fields, function(i, field) {
            if ($.isPlainObject(field)) {
                for (var key in field) {
                    result[key] = form.find("[name='"+field[key]+"']").val();
                }
            } else {
                result[field] = form.find("[name='"+field+"']").val();
            }
        });
        return result;
    };
})(jQuery.fn.zhhvalidate.defaults);
</pre>

				<h3><i>&gt;</i><p>data-vld选项</p><s></s></h3>
<pre class="prettyprint linenums">
&lt;form data-vld="init:true,oninput:true,focus:true,failFast:false,tips:true,disabled:false"&gt;
&lt;div class="vld-line" data-vld="group:true,failFast:false,tips:true,disabled:false"&gt;&lt;/div&gt;
&lt;input data-vld="tips:true,disabled:false"&gt;&lt;/input&gt;
</pre>
                <p></p>
				<p><code>init:true|false</code>是否需要初始化事件绑定，默认为true。如果不初始化, 则只有在点提交按钮时才会触发表单校验；如果初始化，则在校验目标输入框内容改变时、失去焦点时、选择框点击时均会触发单元校验，而且在点击&lt;form&gt;中的<code>class="vld-submit"</code>按钮时会校验整个表单，如果所有校验单元全部通过，则自动提交表单。</p>
				<p><code>oninput:true|false</code>是否需要绑定&lt;input&gt;和&lt;textarea&gt;的oninput事件(IE:onpropertychange)，默认为true。如果不初始化, 则只有在点提交按钮时才会触发表单校验；如果绑定，则每输入一个字符都会触发单元校验。只在init=true时有效。</p>
				<p><code>focus:true|false</code>是否需要在表单校验失败时将焦点移至第一个失败的校验目标上，默认为true。</p>
				<p><code>failFast:true|false</code>快速失败，默认为false。设置为true时，遇到第一个错误就结束校验；false则即使失败仍然继续执行下一个单元校验。</p>
				<p><code>tips:true|false|fix</code>是否显示错误提示，默认为true。true=显示错误提示，查找校验单元中的vld-tips设置text；false=不自动显示错误提示，一般是js调用时传入false用于自已处理错误提示；fix=绝对定位，自动生成错误，显示在目标输入框的右侧。</p>
				<p><code>disabled:true|false</code>是否禁用校验，默认为false。禁用之后则校验始终为通过。如果上层已经禁用，则该选项无效。如form上配置disabled:true，则input上配置disabled:false仍然不会启用校验；而form上配置disabled:false，input上配置disabled:true可以禁用掉input上的校验。</p>
				<p><code>group:true</code>组合校验，配置在form或vld-line上，将其中包含的所有校验目标作为一组处理，错误提示只有一处。可以结合failFast一起使用，如果failFast!=true，则将所有的错误提示合并在一起显示。</p>
				<h3><i>&gt;</i><p>组合校验</p><s></s></h3>
				<div class="bs-docs-example">
				<form class="vld-form vacancy">
					<div class="vld-line" data-vld="group:true">
						<p class="clearfix"><span class="strong" style="float:left">个人资料&nbsp;&nbsp;</span><span class="vld-tips"></span></p>
						<div class="control-group">
							<div class="controls">
							姓名:<input type="text" name="name" class="input-underline" style="width:10em;"
								data-vld="label:'姓名', rules:[ {required:true}, {length:[4,10]}, {regexp:'illegal-char'} ]" />
							&nbsp;&nbsp;&nbsp;
							年龄:<input type="text" name="age" class="input-underline" style="width:3em;"
								data-vld="label:'年龄', rules:[ {length:[1,2]}, {number:true} ]" />岁<br>
							手机号码:<input type="text" name="mobile" class="input-underline" style="width:10em;"
								data-vld="label:'手机号码', rules:[ {required:true}, {regexp:'mobile'} ]" /><br>
							家庭住址:<input type="text" name="province" class="input-underline" style="width:4em;"
									data-vld="label:'省份', rules:[ {length:[2,20]}, {regexp:'illegal-char'} ]" />省
								<input type="text" name="city" class="input-underline" style="width:4em;"
									data-vld="label:'城市', rules:[ {length:[2,20]}, {regexp:'illegal-char'} ]" />市
								<input type="text" name="address" class="input-underline" style="width:30em;"
									data-vld="label:'详细地址', rules:[ {length:[2,200]}, {regexp:'illegal-char'} ]" />
							</div>
						</div>
					</div>
					<div class="control-group vld-line">
						<div class="controls">
							<span class="input-prepend strong">收入水平&nbsp;</span>
							<select class="span3" name="area" autocomplete="off" data-vld="label:'收入水平',rules:{required:true}">
								<option value="">----请选择----</option>
								<option value="1001">0 - 5000</option>
								<option value="1002">5001 - 10000</option>
								<option value="1003">10001 - 20000</option>
								<option value="1004">20000以上</option>
							</select>
							<span class="help-inline">
								<i class="vld-tips"></i>
							</span>
						</div>
					</div>
					<div class="control-group">
						<div class="controls">
							<p>姓名、手机号码不能为空；家庭住址不允许!@#$%^&amp;*,./等特殊字符。<p>
						</div>
						<div class="controls">
							<input type="button" class="btn btn-primary input-medium vld-submit" value="提交" />
						</div>
					</div>
				</form>
				</div>
<pre class="prettyprint linenums">
&lt;div class="vld-line" data-vld="group:true"&gt;&lt;/div&gt;
</pre>
				<div class="bs-docs-example">
				<form class="vld-form form-horizontal login-mini" data-vld="group:true,failFast:true">
					<div class="control-group vld-line">
						<div class="controls">
							<input class="span5" type="text" name="account" placeholder="登录账号"
								data-vld="label:'登录账号', rules:[ {required:true}, {length:[4,10]}, {regexp:'ascii'}, {regexp:'illegal-char'} ]" />
						</div>
					</div>
					<div class="control-group vld-line">
						<div class="controls">
							<input class="span5" type="password" name="pwd" data-trim="false" placeholder="密码"
								data-vld="label:'密码', rules:[ {required:true}, {length:[6,16]}, {regexp:'ascii'}, {compare:'[name=account]',reverse:true}, {pwdlevel:'medium'} ]" />
						</div>
					</div>
					<div class="control-group">
						<div class="controls tips">
							<i class="vld-tips"></i>
						</div>
					</div>
					<div class="control-group">
						<div class="controls">
							<button class="btn btn-primary input-medium vld-submit">登录</button>
						</div>
					</div>
				</form>
				</div>
<pre class="prettyprint linenums">
&lt;form data-vld="group:true,failFast:true"&gt;&lt;/form&gt;
</pre>
				<h3><i>&gt;</i><p>方法</p><s></s></h3>
                <p><code>clear</code>: 清除之前的校验缓存和校验提示</p>
<pre class="prettyprint linenums">
$form.zhhvalidate("clear"); // 清除整个form
$form.find("input[name=account]").zhhvalidate("clear"); // 清除指定校验单元
</pre>
                <p><code>disable</code>: 禁用校验</p>
				<p>禁用的含义就是不执行此校验单元，即调用校验方法时此校验单元的结果是通过。</p>
				<p>如果form是禁用的，则整个form下的所有校验单元都是禁用的。</p>
<pre class="prettyprint linenums">
$form.zhhvalidate("disable"); // 禁用整个form
$form.find("input[name=account]").zhhvalidate("disable"); // 禁用指定校验单元
</pre>
                <p><code>enable</code>: 启用校验</p>
				<p>zhhvalidate("enable", [enableChildren:boolean]): enableChildren=true时循环启用所有校验单元，disable方法没有此参数</p>
<pre class="prettyprint linenums">
$form.zhhvalidate("enable"); // 启用form
$form.zhhvalidate("enable", true); // 启用整个form及所有校验单元
$form.find("input[name=account]").zhhvalidate("enable"); // 启用指定校验单元
</pre>
				<p>如果form是禁用的，则整个form下的所有校验单元都是禁用的:</p>
<pre class="prettyprint linenums colorless">
&lt;form class="form-horizontal" data-options="<span class="colourful">disabled:true</span>"&gt;
  &lt;div class="control-group"&gt;
    &lt;label class="control-label"&gt;手机号码&lt;/label&gt;
    &lt;input name="account" data-vld="<span class="colourful">disabled:false</span>, rules:[ ... ]" /&gt;
  &lt;/div&gt;
  &lt;div class="control-group"&gt;
    &lt;label class="control-label"&gt;短信验证码&lt;/label&gt;
    &lt;input name="validCode" data-vld="<span class="colourful">disabled:false</span>, rules:[ ... ]" /&gt;
  &lt;/div&gt;
  &lt;div class="control-group"&gt;
    &lt;label class="control-label"&gt;登录密码&lt;/label&gt;
    &lt;input name="newPassword" data-vld="<span class="colourful">disabled:true</span>, rules:[ ... ]" /&gt;
  &lt;/div&gt;
&lt;/form&gt;
</pre>
				<p>如下结构将只会校验: <code>account</code> <code>validCode</code>; <code>newPassword</code>由于已被禁用将不会校验。</p>
<pre class="prettyprint linenums colorless">
&lt;form class="form-horizontal" data-options="<span class="colourful">disabled:false</span>"&gt;
  &lt;div class="control-group"&gt;
    &lt;label class="control-label"&gt;手机号码&lt;/label&gt;
    &lt;input name="account" data-vld="<span class="colourful">disabled:false</span>, rules:[ ... ]" /&gt;
  &lt;/div&gt;
  &lt;div class="control-group"&gt;
    &lt;label class="control-label"&gt;短信验证码&lt;/label&gt;
    &lt;input name="validCode" data-vld="<span class="colourful">disabled:false</span>, rules:[ ... ]" /&gt;
  &lt;/div&gt;
  &lt;div class="control-group"&gt;
    &lt;label class="control-label"&gt;登录密码&lt;/label&gt;
    &lt;input name="newPassword" data-vld="<span class="colourful">disabled:true</span>, rules:[ ... ]" /&gt;
  &lt;/div&gt;
&lt;/form&gt;
</pre>
				<h3><i>&gt;</i><p>其他</p><s></s></h3>
                <p>全局配置：<p>
				<p><code>$.fn.zhhvalidate.defaults</code>的所有内容都可以自行配置，常用的配置如下：<p>
<pre class="prettyprint linenums">
+function(zv) {
    // 自定义AJAX解析函数
    zv.ajax.parse = function(e, json) {
        return { passed:json.code == "000000", text:json.message };
    };

    // 样式配置
    zv.classes = {
        "line-error": "vld-error", // 校验不通过时, 添加在校验单元上的样式
        "line-passed": null, // 校验通过时, 添加在校验单元上的样式
        "tips-error": "vld-error", // 校验不通过时, 添加在提示信息上的样式
        "tips-passed": "vld-passed", // 校验通过时, 添加在提示信息上的样式
        "tips-loading": "vld-loading" // 正在校验时, 添加在提示信息上的样式, 一般是AJAX校验用到
    };
    // 例如希望校验不通过时在校验单元上添加has-error样式:
    zv.classes["line-error"] = "has-error";

    // 选择符配置
    zv.selectors = {
        target: ["input[data-vld], textarea[data-vld], select[data-vld]"],
        line: [".vld-line", ".form-group"], // form-group是bootstrap的表单行
        label: [".vld-label", ".control-label"], // control-label是bootstrap的标签
        tips: [".vld-tips"]
    };
    // 例如某项目选择了mui前端框架, 校验行是mui-input-row, 那么可以将该样式添加到列表中:
    zv.selectors.line.push(".mui-input-row");

    // 事件绑定
    // 例如希望在文本框获得焦点时在校验单元上添加vld-typing样式:
    zv.bind.push({on:"focus", selector:"input, textarea, select", fn:function() {
        $(this).closest(zv.selectors.line.join(",")).addClass("vld-typing");
    }});
    zv.bind.push({on:"blur", selector:"input, textarea, select", fn:function() {
        $(this).closest(zv.selectors.line.join(",")).removeClass("vld-typing");
    }});
}(jQuery.fn.zhhvalidate.defaults);
</pre>
                <p>提交表单：<p>
<pre class="prettyprint linenums">
$("button[name=dosubmit]").click(function(e) {
    e.preventDefault();
    var $form = $(this).closest("form");
    $form.zhhvalidate(function(e) {
        if (e.passed) {
            $form.submit();
        }
    });
});
</pre>
				<p>手动触发校验：<p>
<pre class="prettyprint linenums">
form.find("input[name=account]").zhhvalidate(function(e) {
    if (e.passed) {
        // do something
    }
});
</pre>
                <p>自己处理错误提示：<p>
				<div class="bs-docs-example">
				<form class="vld-form form-horizontal login-mini tips-alert" data-vld="init:false">
					<div class="control-group vld-line">
						<div class="controls">
							<input class="span5" type="text" name="account" placeholder="登录账号"
								data-vld="label:'登录账号', rules:[ {required:true}, {length:[4,10]}, {regexp:'ascii'}, {regexp:'illegal-char'} ]" />
						</div>
					</div>
					<div class="control-group vld-line">
						<div class="controls">
							<input class="span5" type="password" name="pwd" data-trim="false" placeholder="密码"
								data-vld="label:'密码', rules:[ {required:true}, {length:[6,16]}, {regexp:'ascii'}, {compare:'[name=account]',reverse:true}, {pwdlevel:'medium'} ]" />
						</div>
					</div>
					<div class="control-group">
						<div class="controls tips">
							<i class="vld-tips"></i>
						</div>
					</div>
					<div class="control-group">
						<div class="controls">
							<button class="btn btn-primary input-medium vld-submit" name="dosubmit">登录</button>
						</div>
					</div>
				</form>
				</div>
<pre class="prettyprint linenums">
$("button[name=dosubmit]").click(function(e) {
    e.preventDefault();
    var $form = $(this).closest("form");
    // 设置<span class="text-important">tips=false</span>, 不显示错误提示; 还可以设置<span class="text-important">failFast=true</span>, 每次只显示一条提示
    $form.zhhvalidate({ <span class="text-important">tips:false</span> }, function(e) {
        // 回调参数e
        // -- passed(boolean) FORM表单校验是否通过
        // -- text(String)    校验不通过时的错误原因(校验通过时为空)
        // -- list([json])    每一个表单行的校验校验结果, json内容见vldinput的回调参数说明
        if (e.passed) {
            $form.submit();
        } else {
            alert(e.text); // 自己处理错误提示
        }
    });
});
</pre>

				<h3><i>&gt;</i><p>自定义校验规则</p><s></s></h3>
				<p>以下是自定义一个不能小于当前年份的规则。<p>
<pre class="prettyprint linenums">
(function(zv) {
    zv.rules.put("year-less-current", function(e) {
        if (parseInt(e.value || 0) < new Date().getFullYear()) {
            return false; // 校验未通过
        }
        return true; // 校验通过
    });
    zv.locals["zh-CN"]["year-less-current"] = "{label}不能小于今年";
})(jQuery.fn.zhhvalidate.defaults);
</pre>
				<div class="bs-docs-example">
				<form class="vld-form form-horizontal">
					<div class="control-group vld-line">
						<label class="control-label">计划年度</label>
						<div class="controls">
							<input class="span3" type="text" name="year" placeholder="不能小于今年"
								data-vld="[ {number:{max:9999}}, {'year-less-current':true} ]" />
							<span class="help-inline">
								<i class="vld-tips"></i>
							</span>
						</div>
					</div>
				</form>
				</div>
<pre class="prettyprint linenums">
&lt;input data-vld="[ {number:{max:9999}}, {'year-less-current':true} ]" /&gt;
</pre>
				<p>再来一个复杂的自定义规则。<p>
<pre class="prettyprint linenums">
// 校验不通过时, 返回值有如下5种情况, 用于获取提示信息以及替换占位符:
// 1. result = false                               -- 根据规则名称从locals获取提示消息
// 2. result = "key"                               -- 根据规则名称-key从locals获取提示消息
// 3. result = { "{text}":text }                   -- text就是提示消息
// 4. result = { "key":value }                     -- 根据规则名称-key从locals获取提示消息, 并替换占位符{key}
// 5. result = { "{key}":key, x:xvalue, y:yvalue } -- 根据规则名称-key从locals获取提示消息, 并替换占位符{x},{y}
+function(zv) {
    // 年份自定义规则的提示消息
    zv.locals["zh-CN"]["year-format"] = "{label}格式错误";
    zv.locals["zh-CN"]["year-format-less-current"] = "{label}不能大于今年";
    zv.locals["zh-CN"]["year-format-max"] = "{label}不能大于{max}";
    zv.locals["zh-CN"]["year-format-range"] = "{label}必须在{min}~{max}之间";
    // 年份自定义规则的伪代码
    // { 'year-format':true }
    // { 'year-format':true, max:9999 }
    // { 'year-format':true, min:2050, max:9999 }
    zv.rules.put("year-format", function(e) {
        var value = parseInt(e.value);
        if ('格式错误') {
            return false; // 第1种情况, 规则名称, "year-format" = "{label}格式错误"
        } else if (value < '今年') {
            return "less-current"; // 2: 规则名称-key, "year-format-less-current" = "{label}不能小于今年"
        } else if ('某某特定条件') {
            return { "{text}":"某某特定错误提示" }; // 3: 直接返回错误提示文本
        } else if (e.rule.max != null && value > e.rule.max) {
            // { 'year-format':true, max:9999 }
            // 4: "year-format-max" = "{label}不能大于{max}"
            return { "max":e.rule.max };
        } else if (e.rule.min != null && e.rule.max != null && (value < e.rule.min || value > e.rule.max)) {
            // { 'year-format':true, min:2050, max:9999 }
            // 5: "year-format-range" = "{label}必须在{min}~{max}之间"
            return { "{key}":"range", "min":e.rule.min, "max":e.rule.max };
        }
        return true; // 校验通过
    });
}(jQuery.fn.zhhvalidate.defaults);
</pre>

				<h3><i>&gt;</i><p>完整示例</p><s></s></h3>
				<p>这里是一个完整的注册示例 <a href="./register.html">去看看 &gt;&gt;</a><p>
				<p>&nbsp;<p>

				<h3><i>&gt;</i><p>联系方式</p><s></s></h3>
				<p><a href="mailto:zhaohuihua@126.com">zhaohuihua@126.com</a><p>
				<p>&nbsp;<p>


			</div>
		</div>
	</div>

</body>
</html>
